<!--
 * @Desc: 首页
 * @version: v1.00
 * @Author: harry
 * @Date: 2023-8-10 21:45:31
 * @LastEditors: harry
 * @LastEditTime: 2024-04-07 20:57:16
-->
<template>
  <div class="equipment_repair_list">
    <Tabs
      v-if="rec.tabs?.length > 1"
      :tabs="rec.tabs"
      @changeTab="changeTab"
      :actvie="rec.active"
    />
    <div v-if="rec.active === 0">
      <!-- 搜索 -->
      <!-- <div
        class="search-box"
        :style="{ top: rec.tabs.length > 1 ? '44px' : '0' }"
      >
        <van-search
          v-model="rec.repairTypeName"
          shape="round"
          background="#f5f5f5"
          placeholder="请输入维修标题、维修内容"
          class="search"
          @search="getListFn"
          @clear="getListFn"
        />
      </div> -->
      <!-- 列表卡片 -->
      <ListCard
        :list="rec.list"
        v-if="rec.list.length"
        class="listCard"
        :style="{ paddingTop: rec.tabs?.length <= 1 ? '16px' : auto }"
      />
      <Empty v-else />
      <!-- 切换和添加 -->
      <div class="list_switch">
        <div @click="toRepair">
          <div class="circle orange">
            <svg-icon icon-class="add" />
          </div>
          <span class="title">添加报修</span>
        </div>
      </div>
      <!-- <RoleComp ref="roleRef" /> -->
    </div>
    <div v-if="rec.active === 1">
      <!-- 我的维修 -->
      <RepairList />
    </div>
    <div v-if="rec.active === 2">
      <!-- 维修配置 -->
      <div class="switch">
        <TabComp
          :tabList="rec.switchList"
          @changeOptionTab="changeOptionTab"
          :tabActive="rec.tabActive"
        />
      </div>
      <div class="content">
        <ListItem
          :list="rec.optionList_on"
          v-if="rec.optionList_on.length && rec.tabActive === 1"
          @changeStatus="
            getOptionListFn(0);
            getOptionListFn(1);
          "
        />
        <ListItem
          :list="rec.optionList_off"
          v-else-if="rec.optionList_off.length && rec.tabActive === 2"
          @changeStatus="
            getOptionListFn(0);
            getOptionListFn(1);
          "
        />
        <Empty v-else />
      </div>
      <!-- 切换 -->
      <div class="list_switch">
        <div @click="toAdd()">
          <div class="circle orange">
            <svg-icon icon-class="add" />
          </div>
          <span class="title">添加类型</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from "@/router";
import { onMounted, reactive } from "vue";
import ListCard from "./components/list-card.vue";
import Empty from "@/components/empty/index.vue";
import RepairList from "@/views/repairList/index.vue";
import Tabs from "@/components/tabs/index.vue";
import TabComp from "@/components/tab-comp/index.vue";
import ListItem from "@/views/repairList/components/listItem.vue";
import { getList } from "@/service/modules/home";
import { getOptionList } from "@/service/modules/option";
import { useStore } from "@/store";
import LocalCache from "@/utils/cache";
document.title = "设备报修";
// document.documentElement.scrollTop = 0;
const store = useStore();
const rec = reactive({
  hasItem: true, // 默认有数据
  list: [],
  repairTypeName: "",
  active: LocalCache.getSession("active") || 0,
  optionList_off: [], // 停用
  optionList_on: [], // 启用
  switchList: [],
  tabs: [],
  tabActive: 1,
});

// const roleRef = ref("");
onMounted(() => {
  getListFn();
  getOptionListFn(0);
  getOptionListFn(1);
  const { menuList } = LocalCache.getSession("userInfo");
  const authObj = {
    xxsbbx_wdbx: "我的报修",
    xxsbbx_wdwx: "我的工单",
    xxsbbx_wxpz: "维修配置",
  };
  const authList = menuList?.map((i) => authObj[i.spyCode]);
  rec.tabs = authList || [];
});

// 更改tab页
const changeTab = (active) => {
  document.documentElement.scrollTop = 0;
  rec.active = active;
  LocalCache.setSession("active", active);
};

// 获取报修列表数据
async function getListFn() {
  const { code, rows } = await getList({
    status: -1,
    repairTypeName: rec.repairTypeName,
  });
  if (code === 0) {
    console.log('list', rows);
    rec.list = rows;
  }
}

// 切换维修配置
const changeOptionTab = (idx) => {
  rec.tabActive = idx;
  switch (idx) {
    case 1:
      rec.optionStatus = 1;
      getOptionListFn(1);
      break;
    case 2:
      rec.optionStatus = 0;
      getOptionListFn(0);
      break;
  }
};

// 维修配置列表
async function getOptionListFn(status = 1) {
  const { code, rows, total } = await getOptionList(status);
  if (status === 1) {
    rec.switchList[0] = `启用类型(${total})`;
    if (code === 0) {
      rec.optionList_on = rows.map((i) => {
        return {
          isChecked: Boolean(i.status),
          ...i,
        };
      });
    }
  } else {
    rec.switchList[1] = `停用类型(${total})`;
    if (code === 0) {
      rec.optionList_off = rows.map((i) => {
        return {
          isChecked: Boolean(i.status),
          ...i,
        };
      });
    }
  }
}

const toRepair = () => {
  router.replace("/repair");
};
// 新增维修配置
const toAdd = () => {
  store.commit("setOrg/changePersons", []);
  router.push("/repairlist/set?status=true");
};
</script>

<style lang="less" scoped>
.equipment_repair_list {
  min-height: 100vh;
  background: #f5f5f5;
  .tabs {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
  }
  .repairList {
    margin-top: 44px;
  }
  .content {
    margin-top: 16px;
    padding: 0 16px;
    padding-bottom: 2px;
  }
  .list_switch {
    position: fixed;
    bottom: 34px;
    right: 16px;
    > div {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .title {
        font-size: 14px;
        line-height: 16px;
        color: rgba(48, 50, 51, 1);
        margin-top: 6px;
      }
    }
    .circle {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      text-align: center;
      line-height: 40px;
      background: #ffffff;
      box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.12);
      svg {
        width: 16px;
        height: 16px;
      }
    }
    .orange {
      background: linear-gradient(rgba(255, 201, 87, 1), rgba(255, 145, 83, 1));
      margin-top: 16px;
    }
  }
  .switch {
    margin-top: 44px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 64px;
    background: #fff;
    .tab-comp {
      width: 100%;
      /deep/ .van-tab {
        width: 50%;
      }
    }
  }
  .empty {
    display: flex;
    position: absolute;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .search-box {
    position: fixed;
    top: 44px;
    z-index: 10;
    width: 100%;
    padding: 16px !important;
    background: #f5f5f5;
  }
  .search {
    /deep/ .van-cell {
      border-radius: 40px;
      padding: 0.3125rem var(--van-padding-xs) 0.3125rem 0;
    }
  }
  .listCard {
    padding: 0 16px;
    padding-top: 60px;
    padding-bottom: 1px;
  }
  .list_switch {
    position: fixed;
    bottom: 34px;
    right: 16px;
    > div {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .title {
        font-size: 14px;
        line-height: 16px;
        color: rgba(48, 50, 51, 1);
        margin-top: 6px;
      }
    }
    .circle {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      text-align: center;
      line-height: 40px;
      background: #ffffff;
      box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.12);
      svg {
        width: 16px;
        height: 16px;
      }
    }
    .orange {
      background: linear-gradient(rgba(255, 201, 87, 1), rgba(255, 145, 83, 1));
      margin-top: 16px;
    }
  }
}
/* 搜索框 */
/deep/ .van-search__content {
  height: 36px;
  background: #fff !important;
}
/deep/ .van-search {
  padding: 0 !important;
}
/deep/ .van-search__field .van-field__left-icon {
  color: #919599;
}
</style>
